import router, { asyncRoutes } from './router'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import store from '@/store'

const whiteList = ['/login', '/404'] // no redirect whitelist
router.beforeEach(async(to, from, next) => {
  NProgress.start()
  /*
    判断是否有token,
    1.1如果有token, 1.2还是去登录页的话, 就跳转到主页,(在页面中就要把进度条关闭) 1.3否则就放行
    2.1如果没token: 2.2判断是否去的白名单, 如果是就放行, 2.3否则就跳转到登录页, 关闭进度条
  */

  // 嵌套写法
  /* if (store.getters.token) {
    if (to.path === '/login') {
      next('/')
      NProgress.done()
    } else {
      // 3.2 每次进入页面之前判断是否有用户信息, 如果没有就获取用户信息
      if (!store.getters.name) {
        // 3.1 进入页面之前获取用户信息
        store.dispatch('user/getUserInfoActions')
      }
      next()
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  } */

  // 1.1 有token
  if (store.getters.token) {
    // 1.2 去登录页就打回首页
    if (to.path === '/login') {
      next('/')
      NProgress.done()
      return
    }

    // 3.2 每次进入页面之前判断是否有用户信息, 如果没有就获取用户信息
    if (!store.getters.name) {
      // 3.1 进入页面之前获取用户信息
      await store.dispatch('user/getUserInfoActions')

      // 4.3 先获取用户有什么菜单(权限)
      const menus = store.getters.user.roles.menus

      // 4.4 筛选出有权限的路由,使用路由规则里的name来判断
      const newRouteList = asyncRoutes.filter(v => {
        return menus.includes(v.name)
      })

      // 4.5 使用addRoutes追加路由, 类似数组的push, 也要把404页面追加到路由的最后面, 防止刷新404页面
      router.addRoutes([...newRouteList, { path: '*', redirect: '/404', hidden: true }])
      store.commit('user/saveUserRoutes', newRouteList) // 4.9 把路由更新到vuex中
      next(to.path) // 4.6 修复vue2路由bug, addRoutes之后需要多做一次跳转-坑点
    }
    next()
    return
  }

  // 2. 没有token
  // 2.1 去白名单, 直接放行
  if (whiteList.includes(to.path)) {
    next()
    return
  }

  // 2.2 去的不是白名单, 直接跳到登录页
  next('/login')
  NProgress.done()
})

router.afterEach(() => {
  NProgress.done()
})
